<script setup lang="ts">
import { AppstoreOutlined, HomeOutlined, SettingOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import StarBackground from '@/components/StarBackground.vue'

const router = useRouter()
const activeMenu = ref('/')

const menus = [
  { key: '/', icon: HomeOutlined, label: 'Command Center' },
  { key: '/demos/counter', icon: AppstoreOutlined, label: 'Modules' },
  { key: '/system', icon: SettingOutlined, label: 'System' },
]

function handleNav(key: string) {
  activeMenu.value = key
  router.push(key)
}
</script>

<template>
  <div
    class="min-h-screen text-white font-sans selection:bg-blue-500 selection:text-white overflow-hidden"
  >
    <!-- 动态星空背景 -->
    <StarBackground />

    <!-- HUD Top Bar -->
    <header
      class="fixed top-0 left-0 right-0 h-16 z-50 flex items-center justify-between px-8 border-b border-white/10 bg-black/20 backdrop-blur-sm"
    >
      <div class="flex items-center gap-4">
        <div
          class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center shadow-[0_0_15px_rgba(37,99,235,0.5)]"
        >
          <span class="font-bold text-lg">S</span>
        </div>
        <div class="flex flex-col">
          <h1 class="text-sm font-bold tracking-[0.2em] text-blue-100 uppercase">Saury Demo</h1>
          <span class="text-[10px] text-blue-400/80 tracking-widest">INTERSTELLAR EDITION</span>
        </div>
      </div>

      <!-- 简易系统状态 -->
      <div class="flex items-center gap-6 text-xs font-mono text-blue-300/80">
        <div class="flex items-center gap-2">
          <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
          <span>SYS: ONLINE</span>
        </div>
        <div class="hidden md:block">
          <span>CPU: 12%</span>
        </div>
        <div class="hidden md:block">
          <span>MEM: 4.2GB</span>
        </div>
      </div>
    </header>

    <!-- HUD Sidebar -->
    <aside
      class="fixed left-0 top-16 bottom-0 w-20 border-r border-white/10 bg-black/10 backdrop-blur-sm z-40 flex flex-col items-center py-8 gap-8"
    >
      <div
        v-for="menu in menus"
        :key="menu.key"
        class="relative group cursor-pointer"
        @click="handleNav(menu.key)"
      >
        <div
          class="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 border border-transparent group-hover:border-blue-500/50 group-hover:bg-blue-500/10 group-hover:shadow-[0_0_15px_rgba(59,130,246,0.3)]"
          :class="
            activeMenu === menu.key
              ? 'bg-blue-600 text-white shadow-[0_0_20px_rgba(37,99,235,0.6)] border-blue-400'
              : 'text-blue-200/60'
          "
        >
          <component :is="menu.icon" class="text-xl" />
        </div>
        <!-- Tooltip -->
        <div
          class="absolute left-full ml-4 top-1/2 -translate-y-1/2 px-3 py-1 bg-blue-900/80 border border-blue-500/30 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none backdrop-blur-md"
        >
          {{ menu.label }}
        </div>
      </div>
    </aside>

    <!-- Main Content Area -->
    <main class="pt-16 pl-20 min-h-screen relative">
      <!-- 装饰性网格线 -->
      <div
        class="absolute inset-0 pointer-events-none opacity-20"
        style="
          background-image:
            linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
          background-size: 40px 40px;
        "
      />

      <div class="relative z-10 p-8 h-full">
        <RouterView v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </RouterView>
      </div>
    </main>
  </div>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>
